import useMapDataStore from '@/store/mapData'
import { defineComponent, ExtractPropTypes } from 'vue'
import { getImageUrl } from '@/utils'

export const CardPropsDefine = {
  name: {
    type: Number,
    required: true
  }
} as const

export type CardProps = ExtractPropTypes<typeof CardPropsDefine>

export default defineComponent({
  name: 'Card',
  props: CardPropsDefine,
  setup(props) {
    const { cardTypes } = useMapDataStore()
    /* render 函数 */
    return () => {
      const { name } = props
      return (
        <div class="w-16 h-16 flex justify-center items-center border-2 border-solid border-gray-500 cursor-pointer">
          <img src={getImageUrl(`${name}`)} class="w-full h-full" />
          {/* {cardTypes[name - 1]} */}
        </div>
      )
    }
  }
})
